import React from 'react';
import { createModalContainer } from '@/components/changeModal';
import {Steps,Spin,message} from 'antd';
import { connect } from 'dva';
import styles from './index.less';

const Step = Steps.Step;

class ModalComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        }
    }

    componentDidMount() {
        this.getCode();
        window.Isoption = true;
    }

    componentWillMount() {
        window.Isoption = false;
      }

      // 取消
      handleCancel =() => {
        this.props.cancel();
    }

    convertCanvasToImage=(canvas)=>{
        const image = new Image();
        image.src = canvas.toDataURL("image/png");            //canvas转化为img
        return image;
    }

    imageToCanvas=(url1,url2,code,name)=> {
        const that = this;
        const canvas = document.getElementById("myCanvas");
        const ctx = canvas&&canvas.getContext("2d");
        const img1 = new Image();
        img1.crossOrigin = "Anonymous";
        img1.src = url1; 
        img1.onload = function(){
            ctx.drawImage(img1, 0, 0, 528,822);
            const img2 = new Image();
            img2.crossOrigin = "Anonymous";
            img2.src = url2;
            img2.onload = function(){
                ctx.save();
                // ctx.arc(132, 48, 24, 0, 2 * Math.PI);
                // ctx.clip();                             
                // ctx.drawImage(img2, 108, 24, 48, 48);
                // ctx.restore();
                ctx.font="28px Arial";
                ctx.textAlign="center";
                ctx.fillStyle ='#FFFFFF';
                ctx.fillText(`${name}`,264,690);    //文字 这里是写死的 实际中多传个参数就ok
                ctx.restore();
                // ctx.font="14px Arial";
                // ctx.textAlign="center";
                // ctx.fillStyle ='#97BAFF';
                // ctx.fillText('小程序码',132,322);    //文字 这里是写死的 实际中多传个参数就ok
                // ctx.restore();
                ctx.font="48px Arial";
                ctx.textAlign="center";
                ctx.fillStyle ='#fff';
                ctx.fillText('扫一扫提货',264,150); //
                const img3 = new Image();
                img3.crossOrigin = "Anonymous";
                img3.src = code;
                img3.onload = function() {
                    ctx.drawImage(img3,100,255,328,328);     //同理加图像
                      ctx.restore();                           //释放画布状态
                      const imgCode = that.convertCanvasToImage(canvas);    //将图片转为base64
                      that.setState({
                          canvasImg: imgCode.getAttribute('src')
                      })
                }
            }
        }
    }

    getCode =()=> {
        const {oemInfo,dispatch} = this.props;
        const name = oemInfo.storeName; //店名
        const url1 = oemInfo.cdnUrl + '/' + 'xkdnewyun/systemfile/store/delivery_code.png';//背景图；
        const url2 = oemInfo.cdnUrl + '/' + `${oemInfo.storeLogo}` +'?0999'; //logo
        dispatch({
            type: 'orderPickUp/GetWxCode',
            callBack: {
                success: res=> {
                    if(res.Code ===0) {
                        const code1 = oemInfo.cdnUrl + '/' + res.Data.WxCodeUrl +`?${Math.random()*10000}`;
                        this.setState({
                            visible: true
                        }, ()=> {
                            this.imageToCanvas(url1, url2, code1, name)
                        })
                    }
                },
                error: res=> {
                    message.error(res.Msg)
                }
            }
        })
    }

    render() {
        const {loading} = this.props;
        const {canvasImg} = this.state;
        return (
            <Spin spinning={loading}>
                <div className={styles.modalItem}>
                    <div className={styles.modalBody}>
                        <div className={styles.modalleft}>
                            <Steps size="small" labelPlacement="vertical" direction="vertical">
                                <Step  status="wait"  description="将二维码贴在店里" />
                                <Step  status="wait"  description="买家扫码核销" />
                                <Step  status="wait"  description="店员核销或买家确认提货" />
                                <Step  status="wait"  description="完成核销" />
                            </Steps>
                        </div>
                        <div className={styles.modalright}>
                            <div>
                                <img src={canvasImg} width={264} height={411}/>
                            </div>
                            <a className={styles.btn} href={canvasImg} download>保存图片</a>
                        </div>
                        <canvas id="myCanvas" width="528" height="822" style={{display: 'none'}}
                        ></canvas>
                    </div>
                </div>
            </Spin>
        )
    }
}

const Modalsion = createModalContainer(
    connect(({marketing, global, loading}) =>({
        marketing,
        oemInfo:global.oemInfo,
        loading: loading.effects['orderPickUp/GetWxCode'],
    }))(ModalComponent),
    true,
    true
)

export default Modalsion;